import React from 'react';
import { Breadcrumb, Tabs, Button, Menu, Table, Form, Icon, Input, Pagination, message, Row, Col, DatePicker, } from 'antd';
import $ from 'jquery';
import Config from '../../common/config';
import moment from 'moment';
import '../ZMLsmallPro/smallPro.less';
import echarts from '../../common/echarts.min';
const TabPane = Tabs.TabPane;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const config = new Config();
const now = () => {
    return moment().format('YYYY-MM-DD HH:mm:ss')
};
let option1 = {
    color: ['#37a2da', '#32c5e9', '#67e0e3'],
    tooltip: {
        show: true,
        trigger: 'axis',
        showContent: true,
        axisPointer: {     // 坐标轴指示器，坐标轴触发有效
            show: true,
            color: 'black',
            type: 'line', // 默认为直线，可选为：'line' | 'shadow' | ;corss
            lineStyle: {  //选择器线条样式
                type: 'dashed',//可选 'solid' | 'dashed' | 'dotted',
                color: 'black',
            },
            trigger: 'axis',
            snap: true,
            label: {
                show: true,
                margin: 35,
                backgroundColor: 'black',
                borderColor: 'red'
            }
        }
    },
    grid: {
        show: false,
        left: 0,
        right: 0,
        bottom: "4%",
        top: "30px",
        width: "656px",
        height: "464px",
        containLabel: true
    },
    xAxis: [
        {
            show: true,
            type: 'category',
            axisLine: {
                label: { onZero: true },
                lineStyle: {
                    color: 'red',
                    // color:'black',
                    width: 1
                }
            },
            axisLabel: {
                color: '#666',
                // interval:8,
                margin: 20,
            },
            data: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 32, 24, 25]
        }
    ],
    yAxis: [
        {
            show: true,
            type: 'value',
            axisTick: { show: false },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666',
            }
        }
    ],
    series: [
        {
            type: 'line',
            smooth: true, //是否使用平滑曲线
            symbolSize: 2,
            label: { //拐点文字样式  坐标
                show: true,
                position: 'top'
            },
            itemStyle: { //拐点图像样式
                color: "red",
                borerWidth: 0
            },
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 32, 24, 25],
        }
    ]
};
export default class UserManage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userData: [],//用户列表
            usercount: 0,//用户列表条数
            pageindex: 1,//当前页码
            nickname: '',//筛选时输入的昵称
            dateStr: ['', ''],//最近登录时间日期字符串
            date: [undefined, undefined],//最近登录时间
            dateStr1: ['', ''],//创建时间日期字符串
            date1: [undefined, undefined],//创建时间
            userdetails: '',//用户基本信息
            signintable: '',
            isEidt: false,//是否是编辑状态
            current: '',
            dateStr3: ['', ''],
            signinname: 'steps',
            option: {
                color: ['#37a2da', '#32c5e9', '#67e0e3'],
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    showContent: true,
                    axisPointer: {     // 坐标轴指示器，坐标轴触发有效
                        show: true,
                        color: 'black',
                        type: 'line', // 默认为直线，可选为：'line' | 'shadow' | ;corss
                        lineStyle: {  //选择器线条样式
                            type: 'dashed',//可选 'solid' | 'dashed' | 'dotted',
                            color: 'black',
                        },
                        trigger: 'axis',
                        snap: true,
                        label: {
                            show: true,
                            margin: 35,
                            backgroundColor: 'black',
                            borderColor: 'red'
                        }
                    }
                },
                grid: {
                    show: false,
                    left: 0,
                    right: 0,
                    bottom: "4%",
                    top: "30px",
                    width: "656px",
                    height: "464px",
                    containLabel: true
                },
                xAxis: [
                    {
                        show: true,
                        type: 'category',
                        axisLine: {
                            label: { onZero: true },
                            lineStyle: {
                                color: 'red',
                                // color:'black',
                                width: 1
                            }
                        },
                        axisLabel: {
                            color: '#666',
                            // interval:8,
                            margin: 20,
                        },
                        data: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 32, 24, 25]
                    }
                ],
                yAxis: [
                    {
                        show: true,
                        type: 'value',
                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            color: '#666',
                        }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        smooth: true, //是否使用平滑曲线
                        symbolSize: 2,
                        label: { //拐点文字样式  坐标
                            show: true,
                            position: 'top'
                        },
                        itemStyle: { //拐点图像样式
                            color: "red",
                            borerWidth: 0
                        },
                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 32, 24, 25],
                    }
                ]
            },
        }
    }
    componentWillMount() {

    }
    componentDidMount() {
        let signintable = JSON.parse(this.props.location.state).signintable;
        let userdetails = JSON.parse(this.props.location.state);
        this.setState({
            signintable,
            userdetails,
        })
        console.log(JSON.parse(this.props.location.state))
        this.getUserList(1, userdetails.openid, null, null);
        this.getUsersing(userdetails.openid, 'steps', )
    }
    //获取用户列表
    getUserList(pageindex, openid, start, endtime) {
        let url = `${config.wechat}/zmlHome/foodrecordList`;
        $.ajax({
            url: url,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                pagesize: 10,
                pageindex,
                openid,
                start,
                endtime
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    this.setState({
                        usercount: data.count,
                        userData: data.data
                    })
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    }

    //获取用户体重数据运动数据..
    getUsersing(openid, type, start, endtime) {
        let url = `${config.wechat}/zmlSignin/getSing`;
        $.ajax({
            url: url,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                openid: openid,
                activity_id: '091ddf73-a553-4378-b931-9b038778d732',
                type: type,
                start: start,
                endtime: endtime
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    let X = [];
                    let Y = [];
                    if (data.data.rows.length > 0) {
                        for (let index = 0; index < data.data.rows.length; index++) {
                            Y.push(data.data.rows[index][type])
                            X.push(moment(data.data.rows[index].signdate).format('M-DD'))
                        }
                    }
                    let option = JSON.parse(JSON.stringify(option1));
                    (option.xAxis)[0].data = X;
                    (option.series)[0].data = Y;
                    this.setState({
                        option,
                    })
                    message.success(`${data.mes}`, 2);
                    let signinname = (this.state.signinname);
                    let myChart = echarts.init(this.refs[signinname]);
                    myChart.setOption(this.state.option);
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });

    }
    //分页
    changePage(pageindex) {
        this.setState({
            pageindex
        });
        const { dateStr1, userdetails } = this.state;
        this.getUserList(pageindex, userdetails.openid, dateStr1[0], dateStr1[1]);
    }
    //查询
    doSearch() {
        const { dateStr1, userdetails } = this.state;
        this.setState({
            pageindex: 1,
        });
        this.getUserList(1, userdetails.openid, dateStr1[0], dateStr1[1]);
    }

    range(start, end) {
        const result = [];
        for (let i = start; i < end; i++) {
            result.push(i);
        }
        return result;
    }

    disabledDate(current) {
        // can not select days before today and today
        return current && current.valueOf() < Date.now();
    }
    disabledDate2(current) {
        // can not select days before today and today
        return current && current.valueOf() < Date.now();
    }
    disabledDateTime() {
        return {
            disabledHours: () => range(0, 24).splice(4, 20),
            disabledMinutes: () => range(30, 60),
            disabledSeconds: () => [55, 56],
        };
    }

    disabledRangeTime(type) {
        if (type === 'start') {
            return {
                disabledHours: () => range(0, 60).splice(4, 20),
                disabledMinutes: () => range(30, 60),
                disabledSeconds: () => [55, 56],
            };
        }
        return {
            disabledHours: () => range(0, 60).splice(20, 4),
            disabledMinutes: () => range(0, 31),
            disabledSeconds: () => [55, 56],
        };
    }

    //创建时间日期筛选方法
    changeDate1(date1, dateStr1) {
        this.setState({
            dateStr1,
            date1,
        });
    }
    changeDate2(date, dateStr3) {
        this.setState({
            dateStr3,
            date,
        });
        let { signinname, userdetails } = this.state;
        this.getUsersing(userdetails.openid, signinname, dateStr3[0], dateStr3[1])
    }
    //将来时间禁用
    disabledDate(val) {
        if (val) {
            return val.valueOf() > Date.now();
        } else {
            return false;
        }
    }
    //输入昵称是调用方法
    handleInputNickname(e) {
        console.log(e.target.value);
        let nickname = e.target.value;
        this.setState({
            nickname,
        })
    }
    //保存
    handleSave() {
        this.setState({
            isEidt: false,
        })
    }
    //编辑
    handleEdit() {
        this.setState({
            isEidt: true,
        })
    }
    //标签切换
    tabPane(value) {
        this.setState({
            signinname: value
        });
        let { userdetails, dateStr3 } = this.state;
        this.getUsersing(userdetails.openid, value, dateStr3[0], dateStr3[1])
    }
    //获取体围数据
    getbust(value) {
        console.log(this.state)
        let { userdetails, dateStr3 } = this.state;
        this.getUsersing(userdetails.openid, value, dateStr3[0], dateStr3[1])
    }
    //标签点击事件
    onTabClick(value) {
        this.setState({
            signinname: value
        });
    }
    render() {
        const columns = [
            {
                title: '日期',
                dataIndex: 'createdate',
                width: 100,
            },
            {
                title: '食物名称',
                dataIndex: 'foodname',
                width: 100,
            }, 
        ];
        const { userData, signinname } = this.state;
        return (
            <div className='goods-label clearfix userdetails-detail' style={{ marginTop: '40px' }}>
                <Row style={{ marginBottom: '20px' }}>
                    <Col span={2} style={{ fontWeight: 'bold', fontSize: '15px' }}>用户详情</Col>
                    <Col span={2} offset={20}>{this.state.isEidt ? <Button type="primary" onClick={this.handleSave.bind(this)}>保存</Button> : <Button type="primary" onClick={this.handleEdit.bind(this)}>编辑</Button>}</Col>
                </Row>
                {/* 修改区域*/}
                <Form>
                    <Row style={{ borderBottom: '2px solid #ddd', paddingBottom: '20px' }}>
                        <Col span={2} className="font-bold">ID：</Col>
                        <Col span={2}>{this.state.userdetails.id}</Col>
                        <Col span={2} className="font-bold">OpenID：</Col>
                        <Col span={5}>{this.state.userdetails.openid}</Col>
                    </Row>
                    <Row style={{ borderBottom: '2px solid #ddd', marginTop: "20px" }}>
                        <Col span={1} className="font-bold">创建时间：</Col>
                        <Col span={3}>{moment(this.state.userdetails.createdAt).format('YYYY-MM-DD')}</Col>
                        <Col span={2} className="font-bold">最近登录时间:</Col>
                        <Col span={3}>{this.state.signintable == null ?moment().format('YYYY-MM-DD'):moment(this.state.signintable.updatedAt).format('YYYY-MM-DD')}</Col>
                        <Col span={1} className="font-bold">状态:</Col>
                        <Col span={3}>正常</Col>
                    </Row>
                    <Row style={{}}>
                        <Col span={1} className="font-bold">昵称:</Col>
                        <Col span={3}>{this.state.userdetails.nickName}</Col>
                        <Col span={1} className="font-bold">性别:</Col>
                        <Col span={3}>{this.state.userdetails.sex == 0 ? '男' : '女'}</Col>
                        <Col span={1} className="font-bold">生日:</Col>
                        <Col span={3}>{this.state.userdetails.birthday}</Col>
                        <Col span={1} className="font-bold">身高:</Col>
                        <Col span={3}>{this.state.userdetails.height + 'cm'}</Col>
                    </Row>
                    <Row style={{}}>
                        <Col span={1} className="font-bold">体重:</Col>
                        <Col span={3}>{this.state.signintable == null ?0:this.state.signintable.weight + 'kg'}</Col>
                        <Col span={1} className="font-bold">目标:</Col>
                        <Col span={3}>{this.state.userdetails.target + 'kg'}</Col>
                        <Col span={1} className="font-bold">步数:</Col>
                        <Col span={3}>{this.state.signintable == null ?0:this.state.signintable.steps}</Col>
                        <Col span={1} className="font-bold">胸围:</Col>
                        <Col span={3}>{this.state.signintable == null ?0:this.state.signintable.bust}</Col>
                    </Row>
                    <Row style={{}}>
                        <Col span={1} className="font-bold">腰围:</Col>
                        <Col span={3}>{this.state.signintable == null ?0:this.state.signintable.waist}</Col>
                        <Col span={1} className="font-bold">臀围:</Col>
                        <Col span={3}>{this.state.signintable == null ?0:this.state.signintable.hipline}</Col>
                        <Col span={1} className="font-bold">臂围:</Col>
                        <Col span={3}>{this.state.signintable == null ?0:this.state.signintable.arm}</Col>
                        <Col span={1} className="font-bold">大腿围:</Col>
                        <Col span={3}>{this.state.signintable == null ?0:this.state.signintable.thigh}</Col>
                    </Row>
                    <Col span={1} className="font-bold">小腿围:</Col>
                    <Col span={3}>{this.state.signintable == null ?0:this.state.signintable.calf}</Col>
                </Form>
                {/*  */}
                <div className='food' style={{ marginTop: '70px', display: "flex" }} >
                    <div className="foodtable" style={{ textAlign: "center", width: "50%", padding: "20px", }}>
                        <span style={{ fontWeight: 'bold', fontSize: '15px' }}>异常饮食（一周）:{this.state.usercount}</span>
                        <Row>
                            <Col>
                                <RangePicker placeholder={['请选择日期', '请选择日期']}
                                    onChange={this.changeDate1.bind(this)}
                                    format='YYYY-MM-DD'
                                    value={this.state.date1}
                                    style={{ width: '200px' }}
                                    disabledDate={(val) => this.disabledDate(val)}
                                />
                                <Button type="primary" style={{ marginLeft: "10px" }} onClick={this.doSearch.bind(this)}>查询</Button>
                            </Col>

                        </Row>
                        <div className="clearfix dataManage">
                            <div className='allgoods-table clearfix' style={{ marginTop: '20px' }}>
                                <Table
                                    rowKey="id"
                                    columns={columns}
                                    dataSource={userData}
                                    pagination={false}
                                    bordered
                                />
                            </div>
                        </div>
                        <div className='goods-label-let'>
                            <div className="floor-ppagi">
                                {
                                    this.state.usercount === 0 ?
                                        <p className="floor-ppagip">
                                            共{this.state.usercount}条记录
                                </p> :
                                        <p className="floor-ppagip">
                                            当前显示
                                    {10 * (this.state.pageindex - 1) + 1}—
                                    {10 * this.state.pageindex < this.state.usercount ? 10 * this.state.pageindex : this.state.usercount}条记录，
                                    共{this.state.usercount}条记录
                                </p>
                                }
                                <Pagination showQuickJumper current={this.state.pageindex} total={this.state.usercount || 1} defaultPageSize={10} onChange={this.changePage.bind(this)} />
                            </div>
                        </div>
                    </div>
                    <div className="WeRunData" style={{ textAlign: "center", width: "50%", padding: "20px", }}>
                        <span style={{ fontWeight: 'bold', fontSize: '15px' }}>体围数据:</span>
                        <Row>
                            <Col>
                                <RangePicker placeholder={['请选择日期', '请选择日期']}
                                    onChange={this.changeDate2.bind(this)}
                                    format='YYYY-MM-DD'
                                    value={this.state.date}
                                    style={{ width: '200px' }}
                                    disabledDate={(val) => this.disabledDate(val)}
                                />
                            </Col>
                        </Row>
                        <Tabs defaultActiveKey="steps" onChange={this.tabPane.bind(this)} onTabClick={this.onTabClick.bind(this)}>
                            <TabPane tab={<span><Icon type="line-chart" />步行</span>} key="steps">
                                <div ref="steps" style={{ width: '100%', height: '600px' }}></div>
                            </TabPane>
                            <TabPane tab={<span><Icon type="line-chart" />体重</span>} key="weight">
                                <div ref="weight" style={{ width: '100%', height: '600px' }}></div>
                            </TabPane>
                            <TabPane tab={<span><Icon type="line-chart" />体围</span>} key="bust">
                                <div ref="bust" style={{ width: '100%', height: '600px' }}></div>
                            </TabPane>
                        </Tabs>
                        {signinname === "bust" ? <Row className="bust-details">
                            <Col span={2} offset={1} onClick={this.getbust.bind(this, 'bust')}>
                                <img src={require('../../../images/ico1.png')} alt="" />
                                <p>胸围</p>
                            </Col>
                            <Col span={2} offset={2} onClick={this.getbust.bind(this, 'waist')}>
                                <img src={require('../../../images/ico1.png')} alt="" />
                                <p>腰围</p>
                            </Col>
                            <Col span={2} offset={2} onClick={this.getbust.bind(this, 'hipline')}>
                                <img src={require('../../../images/ico1.png')} alt="" />
                                <p>臀围</p>
                            </Col>
                            <Col span={2} offset={2} onClick={this.getbust.bind(this, 'arm')}>
                                <img src={require('../../../images/ico1.png')} alt="" />
                                <p>臂围</p>
                            </Col>
                            <Col span={2} offset={2} onClick={this.getbust.bind(this, 'thigh')}>
                                <img src={require('../../../images/ico1.png')} alt="" />
                                <p>大腿围</p>
                            </Col>
                            <Col span={2} offset={2} onClick={this.getbust.bind(this, 'calf')}>
                                <img src={require('../../../images/ico1.png')} alt="" />
                                <p>小腿围</p>
                            </Col>
                        </Row> : ''}


                    </div>
                </div>
            </div>
        )
    }
}